iT邦幫忙

2024 iThome 鐵人賽

DAY 18
1
Modern Web

元素不可思議事件簿系列 第 18

Day 18 - 最近朋友推薦我蓮霧麵茶

  • 分享至 

  • xImage
  •  

此友非友,可棄之也。
img

圖片來源:Threads
回收要記得分類,垃圾要記得丟喔!

鼠輩之不可思議事件已大致於前篇介紹完畢。可喜可賀。
本篇紀錄之不可思議事件為focusblur事件,並結合二事件示例一操術法。

事件其十七:focus

此事件發生於元素受矚之時。focus事件需發生於元素受矚之後。元素通常於鼠輩點按後受矚,或鍵石Tab受力後可切換受矚之對象。

規範原文:
A user agent MUST dispatch this event when an event target receives focus. The focus MUST be given to the element before the dispatch of this event type.

設定受矚之元素樣式為粉色外框以觀察元素是否受矚。

.momo:focus {
  outline: 3px solid pink;
}

鼠輩點按後受矚之小桃元素:
img

鍵石Tab受力後切換受矚之對象於小桃元素:
img

事件其十八:blur

focus事件相反,此事件發生於元素取消受矚之時。blur事件需於元素取消受矚之後發生。

規範原文:
A user agent MUST dispatch this event when an event target loses focus. The focus MUST be taken from the element before the dispatch of this event type.

以下示例結合focusblur事件,使小桃元素露出其邪惡本性。

const momo = document.querySelector(".momo");
const text = document.querySelector(".text");

function becomeEvil() {
  this.style.backgroundImage = `url("./momo_ya.png")`;
  text.textContent = `我很可愛。`;
}

function mitte() {
  this.style.backgroundImage = `url("./momo_mitte.png")`;
  text.textContent = `看~我~~`;
}

momo.addEventListener("focus", becomeEvil);
momo.addEventListener("blur", mitte);

分段註釋如下:
選取小桃元素及文字元素。

const momo = document.querySelector(".momo");
const text = document.querySelector(".text");

定義函式之術,各名為becomeEvilmitte,內容分別為顯示邪惡小桃說已之可愛及顯示命令其他人應關注己身之邪惡小桃。

function becomeEvil() {
  this.style.backgroundImage = `url("./momo_ya.png")`;
  text.textContent = `我很可愛。`;
}

function mitte() {
  this.style.backgroundImage = `url("./momo_mitte.png")`;
  text.textContent = `看~我~~`;
}

設定二觀測器,對於小桃元素觀測focusblur事件,期望當小桃元素受矚時發生focus事件以顯示邪惡小桃說已之可愛,而當小桃元素離開受矚時發生blur事件以顯示命令其他人應關注己身之邪惡小桃。

momo.addEventListener("focus", becomeEvil);
momo.addEventListener("blur", mitte);

完美呈現邪惡小桃惱人之行為。著實反胃也。
img

示例處

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day18

翻譯

鼠輩:滑鼠
受矚:focus
鍵石:鍵

相關連結


上一篇
Day 17 - 對你的愛沒有盡頭
下一篇
Day 19 - 毫無反應就是個小桃
系列文
元素不可思議事件簿30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
jeremykuo
iT邦新手 5 級 ‧ 2024-10-03 11:09:21

好無聊,講笑話給我聽/images/emoticon/emoticon09.gif

橘子 iT邦新手 4 級 ‧ 2024-10-03 13:46:07 檢舉

快安慰我
img

我要留言

立即登入留言